<template>
  <text>{{ dateShow }}</text>
</template>

<script lang="ts">
import { friendlyDate } from "./date-format.js";
/**
 * Dateformat 日期格式化
 * @description 日期格式化组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=3279
 * @property {Object|String|Number} date 日期对象/日期字符串/时间戳
 * @property {String} locale 格式化使用的语言
 * 	@value zh 中文
 * 	@value en 英文
 * @property {Array} threshold 应用不同类型格式化的阈值
 * @property {String} format 输出日期字符串时的格式
 */
export default {
  name: "uniDateformat",
  props: {
    date: {
      type: [Object, String, Number],
      default() {
        return "-";
      },
    },
    locale: {
      type: String,
      default: "zh",
    },
    threshold: {
      type: Array,
      default() {
        return [0, 0];
      },
    },
    format: {
      type: String,
      default: "yyyy/MM/dd hh:mm:ss",
    },
    // refreshRate使用不当可能导致性能问题，谨慎使用
    refreshRate: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      refreshMark: 0,
    };
  },
  computed: {
    dateShow() {
      this.refreshMark;
      return friendlyDate(this.date, {
        locale: this.locale,
        threshold: this.threshold,
        format: this.format,
      });
    },
  },
  watch: {
    refreshRate: {
      handler() {
        this.setAutoRefresh();
      },
      immediate: true,
    },
  },
  methods: {
    refresh() {
      this.refreshMark++;
    },
    setAutoRefresh() {
      clearInterval(this.refreshInterval);
      if (this.refreshRate) {
        this.refreshInterval = setInterval(() => {
          this.refresh();
        }, parseInt(this.refreshRate));
      }
    },
  },
};
</script>

<style></style>
